<template>
    <div class="autoGrow flex-column container">
        <div class="sub-title">
            <el-button @click="createDialog=true" type="primary" size="small" icon="el-icon-plus">创建</el-button>
        </div>
        <div class="autoGrow flex-column progress-list infinite-list" v-infinite-scroll="load" v-loading="recordloading && pageNo===0">
            <div class="progress-item" @click="detailDrawer=true,detail=progress" v-for="(progress) in progressList" :key="progress.id">
                <div class="fontGrey progress-item-time">{{ formatTime(progress.createtime) }} {{progress.starttime ?'定时发送':'即时发送'}}</div>
                <div class="progress-item-name">{{ progress.groupname }} </div>
                <div class="progress-item-account">
                    <span class="progress-item-account-title">群主：</span>
                    <img class="progress-item-account-avatar" :src="progress.account.avatar" alt="">
                    <span class="progress-item-account-name">{{ progress.account.name }}</span>
                    <span v-if="progress.secondAccounts.length" class="progress-item-account-title">辅助拉群：</span>
                    <el-tooltip class="item" effect="dark" :content="item.name" placement="top" v-for="(item) in progress.secondAccounts" :key="item.id">
                        <img class="progress-item-account-avatar" :src="item.avatar" alt="">
                    </el-tooltip>
                    
                </div>
                <div class="progress-item-send">
                    发送进度：{{ progress.sendcount||0+'/'+progress.membercount }}
                </div>
                <el-progress :show-text="false" :percentage="progress.membercount?Math.min( progress.sendcount/progress.membercount * 100,100 ):0"></el-progress>
            </div>   
             
        </div>

        <el-dialog @closed="createDialogClosed" :title="'创建'" :close-on-click-modal="false" :visible.sync="createDialog" width="800px">
            <div class="create-body flex-row autoGrow">
                
                <div class="create-setting">
                    <div class="create-form">
                        <div class="create-item">
                            <span class="create-item-title">群名称</span>
                            <div class="create-item-content">
                                <el-input v-model="groupName" placeholder="请填写群名称"/>
                            </div>
                            <div></div>
                        </div>
                        <div class="create-item">
                            <span class="create-item-title">群主账号</span>
                            <div class="create-item-content">
                                <el-select :filterable="true" :filter-method="e=>createFilterKeyword=e" v-model="createDialogAccount" value-key="id" placeholder="请选择群主账号">
                                <el-option
                                    v-for="item in createFilterAccounts"
                                    :key="item.id"
                                    :value="item"
                                    :label="item.name"
                                    class="create-item-account"
                                    >

                                    <img class="create-item-account-avatar" :src="item.avatar" />
                                    <span>{{item.name}}</span>

                                </el-option>
                                </el-select>
                            </div>
                            <div></div>
                        </div>
                        <div class="create-item">
                            <span class="create-item-title">辅助账号</span>
                            
                            <div class="create-item-content">
                                <el-select multiple :filterable="true" 
                                    :filter-method="e=>createAssistFilterKeyword=e" 
                                    v-model="createAssist" 
                                    value-key="id"
                                    placeholder="请选择辅助账号">
                                    <el-option
                                        v-for="item in createFilterAssists"
                                        :key="item.id"
                                        :value="item"
                                        :label="item.name"
                                        :disabled="createDialogAccount.id === item.id"
                                        class="create-item-account"
                                        >
                                    <img class="create-item-account-avatar" :src="item.avatar" />
                                    <span>{{item.name}}</span>

                                    </el-option>
                                </el-select>
                            </div>
                            <div></div>
                        </div> 
                        <div class="create-item">
                            <span class="create-item-title">定时任务</span>
                            <div class="create-item-content">
                                <el-date-picker
                                    v-model="createTime"
                                    type="datetime"
                                    placeholder="即刻发送">
                                </el-date-picker>    
                            </div>
                            <div></div>
                        </div> 
                        <div class="create-item">
                            <span class="create-item-title">陌生人({{pickWecatNo.length}})</span>
                            <div class="create-item-content">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入微信号或手机号码，每行为一个号码"
                                    v-model="pickArea">
                                </el-input>
                            </div>
                        </div>
                        <div class="create-item">
                            <span class="create-item-title">好友({{selectedFriends.length}})</span>
                            <div class="create-item-content">
                                <div class="create-list-wrap">
                                    <el-popover
                                        v-for="(item) in selectedFriends" :key="item.id"
                                        placement="top-start"
                                        title=""
                                        width="200"
                                        trigger="hover">
                                        <div>
                                            <span>昵称：</span><span>{{ item.friendnick }}</span>
                                        </div>
                                        <div>
                                            <span>微信号：</span><span>{{ item.friendalias || item.friendwxid }}</span>
                                        </div>
                                        <div>
                                            <span>来自账号：</span><img class="popover-avatar" :src="item.account.avatar" /><span>{{ item.account.name }}</span>
                                        </div>
                                        <div v-if="item.group">
                                            <span>来自群聊：</span>
                                        </div>
                                        <div slot="reference" class="create-item-selected">
                                            <img class="create-item-selected-avatar" :src="item.avatar" />
                                            <span class="create-item-selected-name">
                                            {{ item.friendnick }}
                                            </span> 
                                            <i @click="selectFriends(item,false)" class="el-icon-close create-item-selected-close"></i>
                                        </div>
                                    </el-popover>
                                    
                                </div>
                                
                            </div>
                        </div>
                        <div class="create-item">
                            <span class="create-item-title">群成员({{selectedMembers.length}})</span>
                            <div class="create-item-content">
                                <div class="create-list-wrap">
                                    <el-popover
                                        v-for="(item) in selectedMembers" :key="item.id"
                                        placement="top-start"
                                        title=""
                                        width="200"
                                        trigger="hover">
                                        <div>
                                            <span>昵称：</span><span>{{ item.nick }}</span>
                                        </div>
                                        <div>
                                            <span>微信号：</span><span>{{ item.alias || item.wxid }}</span>
                                        </div>
                                        <div>
                                            <span>来自账号：</span><img class="popover-avatar" :src="item.account.avatar" /><span>{{ item.account.name }}</span>
                                        </div>
                                        <div v-if="item.group">
                                            <span>来自群聊：</span><img class="popover-avatar" :src="item.group.avatar" /><span>{{ item.group.groupname }}</span>
                                        </div>
                                        <div slot="reference" class="create-item-selected">
                                            <img class="create-item-selected-avatar" :src="item.avatar" />
                                            <span class="create-item-selected-name">
                                            {{ item.groupnick||item.nick }}
                                            </span> 
                                            <i @click="selectMembers(item,false)" class="el-icon-close create-item-selected-close"></i>
                                        </div>
                                    </el-popover>
                                    
                                    
                                </div>
                            </div>
                        </div> 
                    </div>
                    <div class="create-buttons">
                        <el-button :loading="submitLoading" @click="confirmSend()" :disabled="!canSubmit" type="primary">即时发送({{pickWecatNo.length + selectedFriends.length + selectedMembers.length}})</el-button>
                        <el-button @click="createDialog=false" plain>取消</el-button>
                    </div>   
                </div>
                <div class="create-selection">
                    <template v-if="pickType===0">
                        <!-- <div v-if="createDialogAccount.id" class="select-account">
                            <div class="select-account-info">
                                <img class="select-account-avatar" :src="createDialogAccount.avatar" alt="">
                                <span class="select-account-name">{{createDialogAccount.name}}</span>
                            </div>
                            <ul class="select-account-type">
                                <li @click="navToFriends(createDialogAccount)">- 好友</li>
                                <li>- 群组</li>
                            </ul>
                        </div> -->
                        <div @click="navToAllFriends(createAccounts)" class="select-friends-all" v-if="createAccounts.length">所有好友</div>
                        <div v-for="(item, index) in createAccounts" :key="index" class="select-account">
                            <div class="select-account-info">
                                <img class="select-account-avatar" :src="item.avatar" alt="">
                                <span class="select-account-name">{{item.name}}</span>
                            </div>
                            <ul class="select-account-type">
                                <li @click="navToFriends(item)">- 好友</li>
                                <li @click="navToGroups(item)">- 群组</li>
                            </ul>
                        </div>
                    </template>
                    <template v-else-if="pickType===1">
                        <div class="friend-hd">
                            <div class="friend-account-info">
                                
                                <a href="javascript:" class="friend-hd-link" @click="pickType=0">
                                    <i class="el-icon-arrow-left"></i>
                                    <img class="friend-hd-avatar" :src="pickAccount.avatar" />
                                    <span class="friend-hd-name">{{ pickAccount.name }}</span>   
                                </a>
                                
                            </div>
                            <div class="friend-hd-filter">
                                <el-input placeholder="请输入关键词或标签" clearable size="mini" class="friend-hd-keyword" v-model="pickFriendsKeyword"></el-input>
                            </div>

                        </div>
                        <div class="friend-list" v-loading="friendloading">
                            <label class="friend-label" v-for="(item) in pickFilterFriends" :key="item.friendwxid">
                                <input :checked="selectedFriendsId.includes(item.friendwxid)" type="checkbox" name="" id="" @change="selectFriends(item,$event)">
                                <friend 
                                    :avatar="item.avatar"
                                    :name="item.friendnick"
                                    :wxid="item.friendalias || item.friendwxid"
                                    :gender="item.friendsex"
                                    class="friend-label-item"
                                />
                            </label>
                        </div>
                        
                    </template>
                    <template v-else-if="pickType===2">
                        <div class="friend-hd">
                            <div class="friend-account-info">
                                
                                <a href="javascript:" class="friend-hd-link" @click="pickType=0">
                                    <i class="el-icon-arrow-left"></i>
                                    <img class="friend-hd-avatar" :src="pickAccount.avatar" />
                                    <span class="friend-hd-name">{{ pickAccount.name }}</span>   
                                </a>
                                
                            </div>
                            <div class="flex-row friend-hd-filter">
                                <el-input placeholder="请输入关键词或标签" clearable size="mini" class="friend-hd-keyword" v-model="pickGroupsKeyword"></el-input>
                                <el-radio-group class="friend-hd-filter-owner" v-model="pickGroupsIsOwnerFilter" size="mini">
                                    <el-radio-button :label="false">非群主</el-radio-button>
                                    <el-radio-button :label="true">群主</el-radio-button>
                                </el-radio-group>
                            </div>
                            

                        </div>
                        <div class="friend-list" v-loading="grouploading">
                            <label class="friend-label" v-for="(item) in pickFilterGroups" :key="item.id" @click="navToMembers(item)">
                                <!-- <input :checked="selectedGroups.includes(item.id)" type="checkbox" name="" id="" @change="selectFriends(item,$event)"> -->
                                <group 
                                    :avatar="item.avatar"
                                    :name="item.groupname"
                                    :member="item.personnum"
                                    :friend="item.friendNum"
                                    class="friend-label-item"
                                />
                            </label>
                        </div>
                        
                    </template>

                    <template v-else-if="pickType===3">
                        <div class="friend-hd">
                            <div class="friend-account-info">
                                <a href="javascript:" class="friend-hd-link" @click="pickType=0">
                                    <i class="el-icon-arrow-left"></i>
                                    <img class="friend-hd-avatar" :src="pickAccount.avatar" />
                                    <span class="friend-hd-name">{{ pickAccount.name }}</span>   
                                </a>
                            </div>
                            <a style="margin-top:10px" href="javascript:" class="friend-hd-link" @click="pickType=2">
                                <span class="friend-hd-name">{{ pickGroup.groupname }}</span>   
                            </a>
                            <div class="flex-row friend-hd-filter">
                                <el-input placeholder="请输入关键词或标签" clearable size="mini" class="friend-hd-keyword" v-model="pickMembersKeyword"></el-input>
                            </div>

                        </div>
                        <div class="friend-list"  v-loading="memberloading">
                            <label class="friend-label" v-for="(item) in pickFilterMembers" :key="item.id">
                                <input :checked="selectedMembersId.includes(item.wxid)" type="checkbox" name="" id="" @change="selectMembers(item,$event)">
                                <friend 
                                    :avatar="item.avatar"
                                    :name="item.groupnick || item.nick"
                                    :wxid="item.alias || item.wxid"
                                    :gender="item.sex"
                                    class="friend-label-item"
                                />
                            </label>
                        </div>
                        
                    </template>

                    <template v-else-if="pickType===4">
                        <div class="friend-hd">
                            <div class="friend-account-info">
                                
                                <a href="javascript:" class="friend-hd-link" @click="pickType=0">
                                    <i class="el-icon-arrow-left"></i>
                                    <span class="friend-hd-name">所有好友</span>   
                                </a>
                                
                            </div>
                            <div class="friend-hd-filter">
                                <el-input placeholder="请输入关键词或标签" clearable size="mini" class="friend-hd-keyword" v-model="pickFriendsKeyword"></el-input>
                            </div>

                        </div>
                        <div class="friend-list" v-loading="friendloading">
                            <label class="friend-label" v-for="(item) in pickFilterAllFriends" :key="item.id">
                                <input :checked="selectedFriendsId.includes(item.friendwxid)" type="checkbox" name="" id="" @change="selectFriends(item,$event)">
                                <friend 
                                    :avatar="item.avatar"
                                    :name="item.friendnick"
                                    :wxid="item.friendalias || item.friendwxid"
                                    :gender="item.friendsex"
                                    class="friend-label-item"
                                />
                            </label>
                        </div>
                    </template>
                </div>
            </div>
        </el-dialog>

        <el-drawer
            :visible.sync="detailDrawer"
            custom-class="detail-drawer"
            direction="rtl"
            size="600px"
        >

            <div slot="title" class="detail-drawer-title">
                <span>详情</span>

                <div class="detail-drawer-button-group">
                    <el-tooltip v-if="detail.groupno" class="item" effect="dark" content="发送消息" placement="bottom">
                        <el-button @click="toChat(detail)" size="medium" type="text" icon="el-icon-chat-round"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="退出讨论组" placement="bottom">
                        <el-button @click="quitGroup(detail)" size="medium" type="text" icon="el-icon-switch-button"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="终止并移除任务" placement="bottom">
                        <el-button @click="cancelSend(detail)" size="medium" type="text" icon="el-icon-delete"></el-button>
                    </el-tooltip>
                    
                </div>
            
            </div>
            
            <div class="detail-drawer-container">
                <div class="detail-groupname">
                    {{ detail.groupname }} 
                </div>
                <div v-if="detail.groupno" style="text-align:center">
                    <div class="detail-drawer-qrcode" v-loading="!detail.qrcodeBase">
                        <img :src="detail.qrcodeBase" v-if="detail.qrcodeBase" alt="">
                    </div>
                    <el-button type="primary" size="mini" @click="downloadQrCode(detail.qrcodeBase,'群聊-'+detail.groupname+'-二维码')">保存到本地</el-button>
                </div>   
            <el-divider content-position="left">群主账号</el-divider>
            <friend
                v-if="detail.account"
                :name="detail.account.name"
                :avatar="detail.account.avatar"
                :gender="detail.account.gender"
                :wxid="detail.account.wxid"
            />
            <div v-if="detail.secondAccounts&&detail.secondAccounts.length">
                <el-divider content-position="left">辅助账号</el-divider>
                <div class="detail-grid">
                    <friend
                        v-for="(item) in detail.secondAccounts" :key="item.id"
                        :name="item.name"
                        :avatar="item.avatar"
                        :gender="item.gender"
                        :wxid="item.wxid"
                        class="record-user-friend"   
                    />
                </div>
                
            </div>
            <div v-if="detail.wxGroupTaskItemList&&detail.wxGroupTaskItemList.filter(item=>item.curstep!==3).length">
                <el-divider content-position="left">待拉用户</el-divider>
                <div class="detail-grid">
                    <friend
                        v-for="(item) in detail.wxGroupTaskItemList.filter(item=>item.curstep!==3)" :key="item.id"
                        :name="item.nickname"
                        :avatar="item.avatar"
                        :gender="item.gender"
                        :wxid="item.wxid"
                        class="record-user-friend"   
                    />
                </div>
            </div>
            <div v-if="detail.wxGroupTaskItemList&&detail.wxGroupTaskItemList.filter(item=>item.curstep===3).length">
                <el-divider content-position="left">已进群用户</el-divider>
                <div class="detail-list-item" v-for="(item) in detail.wxGroupTaskItemList.filter(item=>item.curstep===3)" :key="item.id">
                    <friend
                        :name="item.nickname"
                        :avatar="item.avatar"
                        :gender="item.gender"
                        :wxid="item.wxid"
                        class="record-user-friend"   
                    />
                    <div class="fontGrey" v-if="item.updatetime">
                    {{ formatTime(item.updatetime) }}
                    </div>
                </div>
            </div>
            </div>
            
        </el-drawer>
    </div>   
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import pinyin from '@/lib/pinyin'
import Group from '@/components/group'
import Friend from '@/components/friend'
import { getChatid,getAccountid } from '@/lib/data-translate'
import { downloadFromBrowser } from '@/lib/utils'

const resetData = {
    createDialogAccount:{}, // 群主账号
    createFilterKeyword:'',

    createAssist:[],
    createAssistFilterKeyword:'',

    groupName:'',
    createTime:'',

    pickType:0,
    pickAccount:{},
    pickGroup:{},

    pickGroupsIsOwnerFilter:false,
    pickFriendsKeyword:'',
    pickGroupsKeyword:'',
    pickMembersKeyword:'',


    pickArea:'',
    pickWecatNo:[],

    // 已选好友账号
    selectedFriends:[],
    selectedMembers:[],
}
export default {
    name:'CreateGroup',
    components:{Group,Friend},
    data(){
        return {
            // 存储变量
            createDialog:false,
            pickFriends:{},
            pickGroups:{},
            pickMembers:{}, 

            progressList:[], // 记录
            detailDrawer:false,
            detail:{},

            // loading
            recordloading:false,
            friendloading:false,
            grouploading:false,
            memberloading:false,
            submitLoading:false,

            // 分页加载
            pageSize:10,
            pageNo:0,

            ...resetData 
        }
    },

    computed:{
        ...mapState(['uistate','accountMap','accountListMap','uistate']),
        accounts(){
            const {adminid} = this.uistate
            if( adminid ===-1 || !this.accountListMap[adminid] )return []
            const accounts = this.accountListMap[adminid].map(id=>{
                const item = this.accountMap[id]
                const chars = pinyin.getFullChars(item.nick+item.wxid+item.alias).toLocaleLowerCase()
                return {
                    id:item.id,
                    csid:item.csid,
                    name:item.nick,
                    avatar:item.avatar,
                    wxid:item.wxid,
                    gender:item.gender,
                    chars
                }
            })
            return accounts
        },
        accountsByWxids(){
            let map = {}
            this.accounts.forEach(item=>{
                map[item.wxid] = item
            })

            return map 
        },
        selectedFriendsId(){
            return this.selectedFriends.map(item=>item.friendwxid)   
        },
        selectedMembersId(){
            return this.selectedMembers.map(item=>item.wxid)
        } ,
        createFilterAccounts(){
            const keyword = pinyin.getFullChars(this.createFilterKeyword).toLocaleLowerCase()
            return this.accounts.filter(item=>item.chars.indexOf(keyword)>-1)
        },
        createFilterAssists(){
            const keyword = pinyin.getFullChars(this.createAssistFilterKeyword).toLocaleLowerCase()
            return this.accounts.filter(item=>item.chars.indexOf(keyword)>-1)
        },
        createAccounts(){
            if(this.createDialogAccount.id)
                return [this.createDialogAccount,...this.createAssist]
            else
               return [...this.createAssist] 
        },
        pickFilterFriends(){
            if(!this.pickAccount.id){
                return []
            }
            const friends = this.pickFriends[this.pickAccount.id]
            if(!friends){
                return []
            }
            
            const keyword = pinyin.getFullChars(this.pickFriendsKeyword).toLocaleLowerCase()
            return friends.filter(friend=>{
                if(friend.isbrand || friend.isent) return false
                if(friend.chars.indexOf(keyword)<0) return false

                return true

            })

        },
        pickFilterAllFriends(){
            if(!this.createAccounts.length)return [];
            const arr1 = this.createAccounts.map(item=>this.pickFriends[item.id]).filter(item=>item);
            const friends =  [].concat.apply([], arr1); 
            const keyword = pinyin.getFullChars(this.pickFriendsKeyword).toLocaleLowerCase()

            return friends.filter(friend=>{
                if(friend.isbrand || friend.isent) return false
                if(friend.chars.indexOf(keyword)<0) return false

                return true

            });
        },
        pickFilterGroups(){
            if(!this.pickAccount.id){
                return []
            }
            const groups = this.pickGroups[this.pickAccount.id]
            if(!groups){
                return []
            }
            
            const keyword = pinyin.getFullChars(this.pickGroupsKeyword).toLocaleLowerCase()
            return groups.filter(group=>{
                if(group.chars.indexOf(keyword)<0) return false
                if(this.pickGroupsIsOwnerFilter)return group.isfirst === 1
                return true
            })

        },
        pickFilterMembers(){
            if(!this.pickGroup.id){
                return []
            }
            const members = this.pickMembers[this.pickGroup.id]
            if(!members){
                return []
            }
            
            const keyword = pinyin.getFullChars(this.pickMembersKeyword).toLocaleLowerCase()
            return members.filter(member=>{
                if(member.chars.indexOf(keyword)<0) return false
                // if(this.pickGroupsIsOwnerFilter)return group.isfirst === 1
                return true
            })

        },
        csid(){
            return this.uistate.adminid
        },
        formatedAccounts() {
            if (!this.accounts.trim()) return []
            return this.accounts.split('\n');
        },
        canSubmit(){
            const count = this.pickWecatNo.length + this.selectedFriends.length + this.selectedMembers.length + this.createAssist.length
            return !!this.groupName&&this.createDialogAccount.id&&count>=2
        }
    },
    mounted(){
        if(this.accounts.length){
          this.getRecord()  
        }
    },
    watch:{
        accounts(newVal,oldVal){
            if(newVal.length && !oldVal.length ){
                console.log(newVal,oldVal)
                console.log('accounts change')
                this.getRecord() 
            }
        },
        createDialog(val,oldVal){
            if(val===true && !oldVal){
                Object.assign(this.$data,resetData)
            }
        },
        pickArea(val){
            const arr = val.split('\n')
            this.pickWecatNo = arr.filter(item=>item.trim())
        },
        createDialogAccount(newAccount){
            // 过滤辅助账号
           this.createAssist = this.createAssist.filter(item=>item.id!=newAccount.id)
           // 
        },
        createAccounts(accounts){
            if(!accounts.filter(account=>account.id === this.pickAccount.id)[0]){
                this.pickType = 0
            }
            const accountwxids = accounts.map(item=>item.wxid)
            this.selectedFriends=this.selectedFriends.filter(item=>accountwxids.includes(item.wxaccount))
            this.selectedMembers=this.selectedMembers.filter(item=>accountwxids.includes(item.wxaccount))
        },
        detailDrawer(val,oldVal){
            if(val && val!=oldVal){
                this.getQrCodeBase(this.detail)    
            }
        }
    },
    methods:{
        ...mapMutations(['updateUIState']),
        ...mapActions(['addChatByFriend','requestChatMap']),
        createDialogClosed(){},
        createAccountChange(e){
            this.createDialogAccount = this.accounts.filter(item=>item.id === e)[0]
        },
        createAssistChange(e){
            this.createAssist = this.accounts.filter(item=>e.includes(item.id))
            console.log(e)
        },
        navToFriends(account){
            this.pickFriendsKeyword=''
            
            this.pickAccount = account
            this.getFriends(account)
            this.pickType = 1
        },
        navToAllFriends(accounts){
            this.pickFriendsKeyword=''

            accounts.forEach(account=>this.getFriends(account))
            this.pickType = 4
        },
        navToGroups(account){
            this.pickGroupsKeyword = ''
            
            this.pickAccount = account
            this.getGroups(account)
            this.pickType = 2    
        },
        navToMembers(group){
            this.pickMembersKeyword = '',
            this.pickGroup = group
            this.getMembersByGroup(group)
            this.pickType = 3  
        },
        getFriends(service){
            const { csid,wxid,id } = service
            if(!id) return;
            if(this.pickFriends[id] && this.pickFriends[id].length)return
            this.friendloading = true
            return this.$api.friend.list({csid,wxaccount:wxid})
            .then(data=>{
                this.friendloading = false
                let pickFriends = {}
                pickFriends = data.map(item=>{
                    const chars = pinyin.getFullChars(item.friendalias+item.friendnick+item.friendwxid).toLocaleLowerCase()
                    item.chars = chars
                    return item
                })
                this.$set(this.pickFriends,id,pickFriends)
            }).catch(e=>{
                this.friendloading = false
                this.$msg(e)
            })

        },
        getGroups(service){
            const { csid,wxid,id } = service
            if(!id) return;
            if(this.pickGroups[id] && this.pickGroups[id].length)return
            this.grouploading = true
            return this.$api.group.list({
                csid,
                wxaccount:wxid
            })
            .then(data=>{
                this.grouploading = false
                let groupsList = {}
                groupsList = data.map(item=>{
                    const chars = pinyin.getFullChars(item.groupname).toLocaleLowerCase()
                    item.chars = chars
                    return item
                })
                this.$set(this.pickGroups,id,groupsList)
            
            }).catch(e=>{
                this.grouploading = false
                this.$msg(e)
            })
        },

        getMembersByGroup(group){
            const { csid,wxaccount,groupno,id } = group
            if(!id)return;
            if(this.pickMembers[id] && this.pickMembers[id].length)return
            this.memberloading = true
            return this.$api.group.members({csId:csid,wxAccount:wxaccount,groupNo:groupno})
            .then(data=>{
                this.memberloading = false
                let groupMembersList = {}
                groupMembersList = data.map(item=>{
                    const chars = pinyin.getFullChars(item.groupnick+item.nick).toLocaleLowerCase()
                    item.chars = chars 
                    return item
                })
                this.$set(this.pickMembers,id,groupMembersList)
            })
            .catch(e=>{
                this.memberloading = false
                this.$msg(e)
            }) 
        },
        load(){
            this.getRecord()
        },
        getRecord(){
            if(!this.accounts.length)return
            const taskType = 1
            const csid = this.csid;
            const params = {
                csId:csid, 
                //  wxAccount:wxid,  //T11465
                taskType,
                pageSize:this.pageSize,
                pageNo:this.pageNo+1,

            }
            if(this.recordloading)return;
            this.recordloading = true
            this.$api.groupTask.getSendList(params)
                .then(data=>{
                    this.pageNo = this.pageNo+1
                    this.recordloading = false
                    const newData = data.map(item=>{
                        item.account = this.accountsByWxids[ item.accountwxid ]
                        const second = item.manageaccounts.split(',').filter(acc=>acc!=item.accountwxid)
                        item.secondAccounts = second.map(s=>this.accountsByWxids[s])
                        return item
                    })
                    if(this.pageNo === 1){
                        this.progressList = newData
                    }else{
                        this.progressList = this.progressList.concat(newData)
                    }
                })
                .catch(e=>{
                    this.recordloading = false
                    this.$msg(e)
                })
        },
         
        selectFriends(friend,e){
            const checked = typeof e === 'boolean'?e:e.target.checked
            if(checked){
                friend.account = this.pickAccount
                this.selectedFriends.push(friend)   
            }else{
                this.selectedFriends = this.selectedFriends.filter(item=>item.friendwxid!==friend.friendwxid)    
            }
            // this.selectedFriends.push(friend)
        },
        selectMembers(member,e){
            const checked = typeof e === 'boolean'?e:e.target.checked
            if(checked){
                member.account = this.pickAccount
                member.group = this.pickGroup
                this.selectedMembers.push(member)   
            }else{
                this.selectedMembers = this.selectedMembers.filter(item=>item.id!==member.id)    
            }
            console.log(checked);
            // this.selectedFriends.push(friend)
        },
        confirmSend() {
            const {csid,wxid } =  this.createDialogAccount
            const secondWxAccount = this.createAssist.map(item=>item.wxid)
            const taskType = 1
            const stranger = this.pickWecatNo
            const membercount = stranger.length + this.selectedFriends.length + this.selectedMembers.length + secondWxAccount.length
            
            let params = {
                csid, 
                accountwxid:wxid,
                tasktype:taskType, //0:建讨论组 1:建群,   
                secondWxAccount, //辅助账号,
                // memberType,  //0：搜索 1:好友 2：群成员, 
                searchNameList:stranger.filter(item=>item.trim()).map(item=>item.trim()), // 群成员搜索名列表, 
                inviteFriendList: this.selectedFriends.map(item=>({
                    friendAccount:item.friendwxid,
                    wxAccount:item.wxaccount,
                    nick:item.friendnick,
                    avatar:item.avatar
                })),
                inviteGroupFriendList:this.selectedMembers.map(item=>({ 

                    wxAccount:item.wxaccount,
                    groupNo:item.groupno,
                    isMyContact:item.ismycontact,
                    wxId:item.wxid,
                    nick:item.nick,
                    avatar:item.avatar

                })),
                groupname:this.groupName, //讨论组或者群名称
                msgcontent:'',
                membercount,
                starttime:this.createTime

            }
            this.submitLoading = true
            this.$api.groupTask.insert(params)
                .then(data=>{
                    this.submitLoading = false

                    data.account = this.accountsByWxids[ data.accountwxid ]
                    const second = data.manageaccounts.split(',').filter(acc=>acc!=data.accountwxid)
                    data.secondAccounts = second.map(s=>this.accountsByWxids[s])

                    this.progressList.unshift(data)
                    this.createDialog = false;
                    this.$message({
                        type:'success',
                        message:'任务创建成功'
                    })
                })
                .catch(e=>{
                    this.submitLoading = false
                    this.$msg(e)
                })

        },
        getQrCodeBase(record){
            const { csid ,accountwxid,groupno } = record
            const params = {
                csId:csid,
                wxAccount:accountwxid ,
                groupNo:groupno
            }
            if(!groupno)return
            this.$api.group.groupQrcode(params)
                .then(data=>{
                    if(data && record.id == this.detail.id){
                        this.$set(this.detail,'qrcodeBase','data:image/png;base64,'+data )
                    }
                }).catch(e=>{
                    if( record.id == this.detail.id){
                        this.$set(this.detail,'qrcodeBase','data:image/png;base64,' )
                    }
                    this.$msg(e);
                })
        },
        downloadQrCode(qrcodeBase,name){
            downloadFromBrowser(qrcodeBase,name) 
        },
        cancelSend(progress) {
            this.$api.groupTask.cancel({id:progress.id,status:2})
            .then(e=>{
                this.progressList = this.progressList.filter(item=>item.id!==progress.id) 
                this.detailDrawer = false
                this.detail = {} 
                this.$message({
                    type:'success',
                    message:'移除成功'
                })
            })
            .catch(e=>{
                this.$message({
                    type:'error',
                    message:e
                })
            })
        },
        toChat(record){
            const { accountwxid,groupno,csid,groupname } = record;
            
            const accountid = getAccountid(this.accountMap,csid,accountwxid)
            const chatid = getChatid(csid,accountid,groupno)

            this.updateUIState({ accountid })
            this.requestChatMap({csid,wxaccount:accountwxid})
            .then(rs=>{
                if(rs&&rs[0]){
                let _group = {
                    csid,
                    accountid,
                    wxaccount:accountwxid,
                    friendnick:groupname,
                    friendNick:groupname,
                    friendwxid:groupno,
                    //avatar:group.avatar
                }
                
                this.addChatByFriend(_group) // 添加到chat相关
                this.$router.push({
                    name: 'home',
                })
                setTimeout(()=>{
                    this.updateUIState({ chatid })
                },0)
                    
                }
                    
            })
        // this.addChatByFriend({...friend,id:undefined}) // 添加到chat相关
        },
        async quitGroup(record){
            const { accountwxid,groupno,csid,groupname } = record;
            const params = {
                csId:csid,
                wxAccount:accountwxid,
                groupNo:groupno
            }
            try{
                const rs = await this.$api.group.quitGroup(params)
                console.log(rs)
            }catch(e){
                this.$message({
                    type:'error',
                    message:'请求失败'
                })
            }
            
        }
    }   
}
</script>
<style scoped>
.container{
    background-color: #f5f6f7;
    height: 100%;
}
.sub-title{
  padding: 10px;
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
  background: #fff;
}
</style>
<style scoped>

.create-body{
    height: 500px;
}
.create-setting{
    display: flex;
    flex:1;
   
    flex-direction: column;
}
.create-form{
    flex:1;
    height: 100%;
    overflow: auto;
    padding: 0 10px;
}
.create-buttons{
    flex-shrink: 0;
    padding-top: 10px;
    text-align: center;
}
.create-selection{
    border-left: 1px solid #ededed;
    width: 300px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    overflow: auto;
}

.create-item{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.create-item-title{
  width: 80px;
  line-height: 40px;
  flex-shrink: 0;
}
.create-item-content{
  flex:1;
  flex-direction: row;
  flex-wrap:wrap; 
}
.create-item-content .el-select{
    width: 100%;
}
.create-item-account{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.create-item-account-avatar{
  width: 20px;
  height:20px;
  border-radius: 10px;
  margin-right: 10px;
}


.select-friends-all{
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
}
.select-friends-all:hover{
  background: #f5f6f7;  
}
.select-account{
    border-top: 1px solid #ededed;
    padding: 0 0 10px 0 
}
.select-account:first-child{
    border-top:none;
}
.select-account-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0
}
.select-account-avatar{
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
.select-account-name{
    margin-left: 10px;
    font-size: 14px;
}
.select-account-type{
    line-height: 30px;
}
.select-account-type li{
    padding-left: 20px;
    cursor: pointer;
}
.select-account-type li:hover{
    background: #f5f6f7;
}

.friend-list{
    height: 100%;
    overflow: auto;
    
}
.friend-label{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
}
.friend-label:hover{
    background: #f5f6f7
}
.friend-label-item{
    overflow: hidden;
    margin-left: 5px;
}
.friend-hd{
    display: flex;
    flex-direction: column;
     
    padding: 10px
}
.friend-hd-filter{
    margin-top: 10px;
    align-items: center;
}
.friend-hd-filter-owner{
    flex-shrink: 0;
    margin-left:10px;
}
.friend-hd-keyword{
   
}
.friend-hd-link{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.friend-account-info{
   display: flex;
   flex-direction: row;
   align-items: center; 
   cursor: pointer;
}
.friend-hd-avatar{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    object-fit: cover;
}
.friend-hd-name{
    color: #333;
    font-size: 14px;
    margin-left:5px; 

}

/* 选择的好友 群成员 匿名账号 */
.create-list-wrap{
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    min-height: 40px;
    outline: 0;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.create-item-selected{
    display: flex;
    flex-direction: row;
    align-items: center;

    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
    max-width: 100px;
    border-radius: 14px;
    padding: 4px;
    /* float: left; */
    margin: 2px;
    height: 20px;
}
.create-item-selected-avatar{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    flex-shrink: 0;

}
.create-item-selected-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    font-size: 12px;
    
}
.create-item-selected-close{
    font-size: 12px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
     border-radius: 50%;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.create-item-selected-close:hover{
    background-color: #C0C4CC;
    color: #fff;
   
   
}

</style>
<style scoped>
.popover-avatar{
    width: 20px;
    height:20px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
}
</style>
<style scoped>
.progress-list{
    height: 100%;
    overflow: auto;
}
.progress-item{
  background: #fff;
  padding:10px;
  margin: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 1px 0px #ccc;
  cursor: pointer;
  align-items: center;

  transition: background-color 300ms ;
}

.progress-item:hover{
  background: #e8e8e8;
  box-shadow: 0 0 3px 0px #ccc;
}
.progress-item-name{
    font-size: 16px;
    color: #333;
}
.progress-item-account-title{
    color: #666;
    font-size: 14px;
}
.progress-item-account{
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.progress-item-time{
    float:right;
    font-size: 12px;
}
.progress-item-account-avatar{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.progress-item-account-name{
    margin: 0 5px;
    margin-right: 20px;
}
.progress-item-send{
    margin: 5px 0;
    font-size: 12px;
    color: #666
}

 
.detail-grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.record-user-friend{
    margin: 5px;
    width: 150px;
}
.detail-list-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

>>> .detail-drawer{
  display: flex;
  flex-direction: column;
}
>>> .detail-drawer .el-drawer__body{
  height: 100%;
}
>>> .detail-drawer .el-drawer__header{
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid #f5f6f7
}
.detail-drawer-container{
  padding: 0 20px;
  height: 100%;
  overflow: auto;
}
.detail-drawer-title{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.detail-drawer-button-group{
  margin-right: 20px;
}
.detail-drawer-button-group .el-button{
  font-size: 20px;
}
.detail-drawer-qrcode{
    width: 150px;
    height: 150px;
    margin:0 auto;
}
.detail-drawer-qrcode img{
    width: 100%;
    height:100%;
    display: block;
}
.detail-groupname{
    font-size: 18px;
    line-height: 64px;
}
</style>


